<template>
  <div id="main" class="stacked-area-chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EchartComponent',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '健康指标异常数据量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['心率异常', '血压异常', '血糖异常']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 一周的数据
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '心率异常',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [30, 40, 35, 50, 45, 60, 55] // 心率异常的每日数据
          },
          {
            name: '血压异常',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [20, 25, 22, 28, 30, 40, 38] // 血压异常的每日数据
          },
          {
            name: '血糖异常',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [15, 18, 12, 20, 25, 30, 28] // 血糖异常的每日数据
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>


<style scoped>
.stacked-area-chart {
  width: 35%;
    height: 350px;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 0 30px #0a113612;
}
</style>